"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
} from "recharts"

const temperatureData = [
  { date: "01-10", temperature: 22.5, humidity: 65.2 },
  { date: "01-11", temperature: 24.1, humidity: 68.7 },
  { date: "01-12", temperature: 25.6, humidity: 72.1 },
  { date: "01-13", temperature: 23.8, humidity: 69.5 },
  { date: "01-14", temperature: 26.2, humidity: 71.3 },
  { date: "01-15", temperature: 25.9, humidity: 70.8 },
  { date: "01-16", temperature: 24.7, humidity: 67.9 },
]

const cropYieldData = [
  { crop: "玉米", yield: 8.5, target: 9.0 },
  { crop: "小麦", yield: 6.2, target: 6.5 },
  { crop: "水稻", yield: 7.8, target: 8.2 },
  { crop: "大豆", yield: 3.1, target: 3.5 },
]

const experimentStatusData = [
  { name: "已完成", value: 12, color: "#15803d" },
  { name: "进行中", value: 8, color: "#84cc16" },
  { name: "准备中", value: 4, color: "#fbbf24" },
]

const soilMoistureData = [
  { location: "A区", moisture: 45.2, optimal: 50 },
  { location: "B区", moisture: 52.8, optimal: 50 },
  { location: "C区", moisture: 68.9, optimal: 65 },
  { location: "D区", moisture: 41.3, optimal: 50 },
]

export function DataVisualization() {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>温度与湿度趋势</CardTitle>
            <CardDescription>过去7天的环境数据变化</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={temperatureData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="date" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line
                  type="monotone"
                  dataKey="temperature"
                  stroke="hsl(var(--chart-1))"
                  strokeWidth={2}
                  name="温度 (°C)"
                />
                <Line type="monotone" dataKey="humidity" stroke="hsl(var(--chart-2))" strokeWidth={2} name="湿度 (%)" />
              </LineChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>作物产量对比</CardTitle>
            <CardDescription>实际产量与目标产量对比分析</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={cropYieldData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="crop" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="yield" fill="hsl(var(--chart-1))" name="实际产量 (吨/亩)" />
                <Bar dataKey="target" fill="hsl(var(--chart-2))" name="目标产量 (吨/亩)" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>实验项目状态分布</CardTitle>
            <CardDescription>当前所有实验项目的状态统计</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={experimentStatusData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, percent }) => `${name} ${percent ? (percent * 100).toFixed(0) : 0}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {experimentStatusData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>土壤湿度监测</CardTitle>
            <CardDescription>各试验田土壤湿度与最适值对比</CardDescription>
          </CardHeader>
          <CardContent>
            <ResponsiveContainer width="100%" height={300}>
              <BarChart data={soilMoistureData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="location" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Bar dataKey="moisture" fill="hsl(var(--chart-2))" name="当前湿度 (%)" />
                <Bar dataKey="optimal" fill="hsl(var(--chart-3))" name="最适湿度 (%)" />
              </BarChart>
            </ResponsiveContainer>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>数据分析摘要</CardTitle>
          <CardDescription>基于当前数据的关键洞察和建议</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="space-y-2">
              <h4 className="font-semibold text-chart-1">温度趋势</h4>
              <p className="text-sm text-muted-foreground">
                过去一周平均温度为24.8°C，较适宜作物生长。建议继续监测温度变化。
              </p>
            </div>
            <div className="space-y-2">
              <h4 className="font-semibold text-chart-2">湿度状况</h4>
              <p className="text-sm text-muted-foreground">
                空气湿度保持在65-72%之间，处于理想范围。C区湿度偏高，需要加强通风。
              </p>
            </div>
            <div className="space-y-2">
              <h4 className="font-semibold text-chart-3">产量预测</h4>
              <p className="text-sm text-muted-foreground">
                根据当前数据，预计玉米和水稻产量将达到目标的95%以上，表现良好。
              </p>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
